---
import Footer from '@layouts/Footer.astro';
import components from '@components/MDX/page-components';
import mdxComponents from '@components/MDX/components';
import { getIndexPage } from '@utils/pages';
import VerticalSideBarLayout from '@layouts/VerticalSideBarLayout.astro';
import { render } from 'astro:content';

const page = await getIndexPage();
let CustomContent = null;

const props = Astro.props;

if (page) {
  const { Content } = await render(page);
  CustomContent = Content;
} else {
  CustomContent = await import('./_default-docs.mdx').then((mod) => mod.default);
}
---

<VerticalSideBarLayout title="EventCatalog">
  <main class="flex sm:px-8 docs-layout h-full">
    <div class="flex docs-layout w-full">
      <div class="w-full lg:mr-2 pr-8 overflow-y-auto py-8">
        <div class="prose prose-md w-full !max-w-none">
          <CustomContent components={{ ...components, ...mdxComponents(props) }} />
        </div>
        <Footer />
      </div>
    </div>
  </main>
</VerticalSideBarLayout>
